<template>
  <div id="home">
   <!-- <router-view/>-->
    <div class="mainMap" :style="{width:mainMapWidth,height:mainMapHeight}">
      <main-map ref="mainMap"></main-map>
    </div>
   <div class="towMapDiv" v-if="showTwo||showFour" :style="{width:towMapDivWidth,height:towMapDivHeight}">
     <div v-show="isEachMap" class="eachMapClose" @click="closeEachMap"><Icon type="md-close" class="iconfont icon-guanbi1"/></div>
     <each-map :mapId="towMapId"></each-map>
   </div>
    <div class="treeMapDIv" v-if="showFour" :style="{width:treeMapDivWidth,height:treeMapDivHeight}">
      <each-map :mapId="treeMapId"></each-map>
    </div>
    <div class="fourMapDiv"  v-if="showFour" :style="{width:fourMapDivWidth,height:fourMapDivHeight}">
      <each-map :mapId="fourMapId"></each-map>
    </div>
  <!--      <div class="towMapDiv"  :style="{width:towMapDivWidth,height:towMapDivHeight}">
     <div v-show="isEachMap" class="eachMapClose" @click="closeEachMap"><Icon type="md-close" class="iconfont icon-guanbi1"/></div>
     <each-map :mapId="towMapId"></each-map>
   </div>
    <div class="treeMapDIv"  :style="{width:treeMapDivWidth,height:treeMapDivHeight}">
      <each-map :mapId="treeMapId"></each-map>
    </div>
    <div class="fourMapDiv"   :style="{width:fourMapDivWidth,height:fourMapDivHeight}">
      <each-map :mapId="fourMapId"></each-map>
    </div> -->
  </div>
</template>

<script>
import mainMap from "./HzMap"
import eachMap from  './EachMap'
import mapEventManager from '../JavaScript/MapEventManager'
import Bus from  "./Bus"
import Global from "./Global"

export default {
  name: "home",
  components: {
    eachMap,
    mainMap
  },
  data(){
    return{
      towMapId:"towMap",
      treeMapId:"treeMap",
      fourMapId:"fourMap",
      mainMapWidth:"100%",
      mainMapHeight:"100%",
      towMapDivWidth:"0px",
      towMapDivHeight:"0px",
      treeMapDivWidth:"0px",
      treeMapDivHeight:"0px",
      fourMapDivWidth:"0px",
      fourMapDivHeight:"0px",
      isEachMap:false,
      showTwo:false,
      showFour:false,
      themeColor:this.GLOBAL.themeColor,
      maps:this.GLOBAL.maps
    }
  },
  mounted: function() {
var self = this;
    Bus.$on('eachMapEvent',function(data){
        var mapIds = ["mainMap","towMap","treeMap","fourMap"];      
      self.isEachMap = true;
      if(data == "two"){
        self.showTwo=true;
        self.mainMapHeight = "100%";
        self.mainMapWidth = "50%";
        self.towMapDivHeight = "100%";
        self.towMapDivWidth="50%";
        self.treeMapDivHeight = "0px";
        self.treeMapDivWidth = "0px";
        self.fourMapDivHeight = "0px";
        self.fourMapDivWidth = "0px";

      }else if(data == "four"){
          self.showFour=true;
        self.mainMapHeight = "50%";
        self.mainMapWidth = "50%";
        self.towMapDivHeight = "50%";
        self.towMapDivWidth="50%";
        self.treeMapDivHeight = "50%";
        self.treeMapDivWidth = "50%";
        self.fourMapDivHeight = "50%";
        self.fourMapDivWidth = "50%";
      }
      //绑定地图联动事件
      //mapEventManager.initExtentEvent(mapIds);
      //将主地图menu里面多余的按钮隐藏
      var menuList = self.$refs.mainMap.ecchMapList_1.menuList;
      for(var i = 0;i<menuList.length;i++){
        if(menuList[i].code == "compareMorePicture" || menuList[i].code == "mapPrint" || menuList[i].code == "addLayers" ||menuList[i].code == "help"||menuList[i].code == "theme"){
          menuList[i].ismenu = false;
        }
      }
    });

  },
  beforeCreate(){


  },
  created(){
    var self=this;
         var localStorage = window.localStorage;
      if (localStorage.theme) {

        var job = JSON.parse(window.localStorage.theme);
        var changeMainTheme = job[0].mainTheme
        var changeMenuTheme = job[1].menuTheme
      } else {
        var theme = [{"mainTheme":self.themeColor}, {"menuTheme": "dark"}]//self.themeColor ="b"
        theme = JSON.stringify(theme);
        localStorage.setItem("theme", theme);
        var job = JSON.parse(window.localStorage.theme);
        var changeMainTheme = job[0].mainTheme
        var changeMenuTheme = job[1].menuTheme
      }
      // 根据用户设置主题
      console.log(changeMainTheme)
      console.log(changeMenuTheme)
      //let path = './src/components/theme/';
      let path = './static/theme/';
      let themeLink = document.querySelector('link[name="theme"]');

      let stylesheetPath = path + changeMenuTheme + changeMainTheme + '.css';

      themeLink.setAttribute('href', stylesheetPath);
  }
  ,
  methods:{
    closeEachMap:function () {
      var self = this;
      self.mainMapHeight = "100%";
      self.mainMapWidth = "100%";
      self.towMapDivHeight = "0px";
      self.towMapDivWidth="0px";
      self.treeMapDivHeight = "0px";
      self.treeMapDivWidth = "0px";
      self.fourMapDivHeight = "0px";
      self.fourMapDivWidth = "0px";
      self.isEachMap = false;
      self.showTwo=false;
      self.showFour=false;
      //将隐藏的
      var menuList = self.$refs.mainMap.ecchMapList_1.menuList;
      for(var i = 0;i<menuList.length;i++){
        menuList[i].ismenu = true;
      }
    }
  }
};

</script>

<style>
body,
html {
  height: 100%;
}
#home {
  width: 100%;
  height: 100%;
}
  .mainMap{
    top: 0px;
    float: left;
  }
  .towMapDiv{
    top: 0px;
    float: right;
  }
  .treeMapDIv{
    bottom: 0px;
    float: left;
  }
  .fourMapDiv{
    bottom: 0px;
    float: right;
  }
  .eachMapClose{
    position: absolute;
    z-index: 10000;
    top: 6px;
    right: 6px;
    height: 24px;
    width: 24px;
  }
.eachMapClose .icon-guanbi1{
  display: block;
  font-size: 24px;
  background-color: #fff;
  border-radius: 24px;
}
</style>
